<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Button widgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Android, programming, introduction, tutorial, 
Java, mobile development">
<meta name="description" content="In this chapter of the Android tutorial, we present
button widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Button widgets</h1>


<p>
In this chapter of the Android development tutorial we will present button 
widgets. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A <code>Button</code> class represents a push button widget in Android. 
The full package path for the button class is android.widgets.Button. Buttons
are clicked to perform an action. A button can display text or an icon. Or both.
Event handlers for Button click events are defined with the <i>android:onClick</i>
attribute of the &lt;Button&gt; element or programatically by setting the
<i>setOnClickListener(View.OnClickListener)</i>.
</p>

<h2>Button</h2>
 
<p>
In the first example we define a button that closes an activity
when pressed.
</p>

<div class="codehead">AndroidManifest.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.zetcode.finish"
      android:versionCode="1"
      android:versionName="1.0"&gt;
 &lt;application android:label="@string/app_name" android:icon="@drawable/ic_launcher"&gt;
    &lt;activity android:name="MainActivity"
                android:label="@string/app_name"&gt;
        &lt;intent-filter&gt;
            &lt;action android:name="android.intent.action.MAIN" /&gt;
            &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
        &lt;/intent-filter&gt;
    &lt;/activity&gt;
 &lt;/application&gt;
&lt;/manifest&gt;
</pre>

<p>
This is the manifest file for the program.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
  &lt;Button
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:layout_marginTop="10dip"
      android:text="@string/btnlabel"
      android:onClick="onClick" /&gt;
&lt;/LinearLayout&gt;
</pre>

<p>
In the <i>main.xml</i> layout file, we define one button widget with the 
&lt;Button&gt; element. The first two attributes define the size of the button
so that it is big enough to show its content. The <i>android:layout_marginTop="10dip"</i> creates
a margin between the title bar of the screen and the button widget. The dip
(density independent pixel) is a unit of measurement that is used for Android
layout management. It best reflects the rich diversity of resolutions and
densities of various Android appliances. The <i>android:text="@string/btnlabel"</i>
attribute defines a text for the button. The actual text resides in the <i>strings.xml</i>
file, which we cover before long. Finally, the <i>android:onClick="onClick"</i> attribute
creates a button event listener for the click event. All we need to do is to define the
onClick() method in the relevant Java source file.
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;Finish button&lt;/string&gt;
    &lt;string name="btnlabel"&gt;Finish&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
In the <i>strings.xml</i> file we have two resource strings. The first is used
in the manifest file to provide a name for the application and the main activity.
The second is used in the layout file to provide a text label for the button widget.
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.finish;

import android.app.Activity;
import android.view.View;
import android.os.Bundle;

public class MainActivity extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
    
    public void onClick(View view) 
    {
        finish();    
    }
}
</pre>

<p>
This is the source file for the main activity. We have defined an <code>onClick()</code>
method which reacts to the button click events. It must take a <i>View</i> as its sole
parameter. The method calls the <code>finish()</code> method which closes the current
activity. We are redirected back to the list of applications.
</p>

<img src="/img/java/android/finishbutton.png" alt="Button">
<div class="figure">
Figure: Button
</div>

<p>
Clicking on the button we are redirected back to the list of applications.
</p>


<h2>Showing a toast</h2>
 
<p>
A toast is a view that contains a quick message for the user. Toasts can
be displayed for a short or a long period of time. In our second application
we create a button widget. It will show a toast message after being pressed.
</p>


<div class="codehead">AndroidManifest.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.zetcode.toast"
      android:versionCode="1"
      android:versionName="1.0"&gt;
    &lt;application android:label="@string/app_name" 
            android:icon="@drawable/ic_launcher"&gt;
        &lt;activity android:name="MainActivity"
                  android:label="@string/app_name"&gt;
            &lt;intent-filter&gt;
                &lt;action android:name="android.intent.action.MAIN" /&gt;
                &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
            &lt;/intent-filter&gt;
        &lt;/activity&gt;
    &lt;/application&gt;
&lt;/manifest&gt;
</pre>

<p>
This is the manifest file.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
  &lt;Button
        android:id="@+id/btnId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:text="@string/label" /&gt;
&lt;/LinearLayout&gt;
</pre>

<p>
In the <i>main.xml</i> layout file, we have one button widget inside the 
LinearLayout, which arranges widgets in a single row or column. In our
case the button is in a single column. The button has a <i>android:id="@+id/btnId"</i>
attribute. The attribute supplies an identifier name for the button. We will
retrieve the button in the main activity using the <code>findViewById()</code> method.
Widgets that are not being referenced do not need this attribute. The plus sign
is used when we create the id of the element. Subsequent references to the element in 
the XML file would be used without the plus sign. (For example in layout managers.)
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;Show Toast&lt;/string&gt;
    &lt;string name="label"&gt;Show&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
This is the <i>strings.xml</i> resource file. The button will have the 'Show' text
label.
</p>


<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.toast;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Gravity;
import android.widget.Button;
import android.widget.Toast;
import android.content.Context;

public class MainActivity extends Activity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initUI();
    }

    public void initUI()
    {
        Button btn = (Button) findViewById(R.id.btnId);

        btn.setOnClickListener(new OnClickListener() 
        {
            @Override
            public void onClick(View arg0) 
            {
                Context ctx = getApplicationContext();
                String msg = "Button was clicked";
                int duration = Toast.LENGTH_SHORT;

                Toast toast = Toast.makeText(ctx, msg, duration);
                toast.setGravity(Gravity.CENTER, 0, 0);
                toast.show();
            }
        });
    }
}
</pre>

<p>
When we click on the button widget, it will show a Toast message in the
center of the screen. The toast will be displayed for a short period of time.
</p>

<pre class="explanation">
...
import android.view.View.OnClickListener;
import android.view.Gravity;
import android.widget.Button;
import android.widget.Toast;
import android.content.Context;
</pre>

<p>
These are some of the new classes needed to be imported in this example.
</p>

<pre class="explanation">
initUI();
</pre>

<p>
In the <code>onCreate()</code> method we call the initUI() method.
It adds the <code>OnClickListener()</code> to the button widget. 
</p>

<pre class="explanation">
Button btn = (Button) findViewById(R.id.btnId);
</pre>

<p>
We get the reference to the button widget that we have specified in the
<i>main.xml</i> file. We use the <code>findViewById()</code> method. The
method finds a <i>View</i> (A button is a kind of a View) by the id attribute
from the <i>main.xml</i> file. The id is located in the auto-generated R
class. R stands for Resource. We can have a look at the R source code 
in the gen/com/zetcode/toast/R.java source file. There we will find the
button id among others.
</p>

<pre class="explanation">
btn.setOnClickListener(new OnClickListener() 
{
    @Override
    public void onClick(View arg0) 
    {
        ...
    }
});
</pre>

<p>
We add the <code>OnClickListener</code> to the button widged. Listeners can 
be set up in various ways. Here we use an anonymous inner class. 
</p>

<pre class="explanation">
Context ctx = getApplicationContext();
String msg = "Button was clicked";
int duration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(ctx, msg, duration);
toast.setGravity(Gravity.CENTER, 0, 0);
toast.show();
</pre>

<p>
We set up and show the Toast view. We get the application context, create 
a message and the duration time. The gravity is the alignment of the view 
within its parent. We position the toast in the center of the screen. By 
default, the toasts are displayed at the bottom of the screen.
</p>

<img src="/img/java/android/showtoast.png" alt="Showing toast">
<div class="figure">
Figure: Showing toast
</div>


<h2>CheckBox</h2>

<p>
A CheckBox widget is a special kind of a button. It has two states. On and off. 
The on state is represented by a tick mark inside a rectangle.
</p>

<pre>
java.lang.Object
  android.view.View
     android.widget.TextView
       android.widget.Button
         android.widget.CompoundButton
           android.widget.CheckBox
</pre>

<p>
This is the inheritance hierarchy for the CheckBox widget. The Button
widget is among its parents. 
</p>
 
<div class="codehead">AndroidManifest.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.zetcode.checkbox"
      android:versionCode="1"
      android:versionName="1.0"&gt;
    &lt;application android:label="@string/app_name" 
            android:icon="@drawable/ic_launcher"&gt;
        &lt;activity android:name="MainActivity"
                  android:label="@string/app_name"&gt;
            &lt;intent-filter&gt;
                &lt;action android:name="android.intent.action.MAIN" /&gt;
                &lt;category android:name="android.intent.category.LAUNCHER" /&gt;
            &lt;/intent-filter&gt;
        &lt;/activity&gt;
    &lt;/application&gt;
&lt;/manifest&gt;
</pre>

<p>
The manifest file.
</p>

<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
  &lt;CheckBox
      android:id="@+id/cb_id"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/cblabel" /&gt;
&lt;/LinearLayout&gt;
</pre>

<p>
The &lt;CheckBox&gt; element creates a CheckBox widget. 
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name">CheckBox&lt;/string&gt;
    &lt;string name="cblabel"&gt;Show title&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
String resources. 
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.checkbox;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.CheckBox;

public class MainActivity extends Activity
{
    private CheckBox cb;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initUI();
    }

  public void initUI() 
  {
      cb = (CheckBox) findViewById(R.id.cb_id);
      cb.setChecked(true);

      cb.setOnClickListener(new OnClickListener() 
      {
          @Override
          public void onClick(View v) 
          {          
              CheckBox cb = (CheckBox) v;

              if (cb.isChecked()) 
              {
                  setTitle("CheckBox");
              } else {
                  setTitle("");
              }
          }
      });
  }    
}
</pre>

<p>
The CheckBox toggles the visibility of the screen title. When the CheckBox is
in a checked state, the title is visible. Othervise it is not.
</p>

<pre class="explanation">
import android.widget.CheckBox;
</pre>

<p>
We import the CheckBox class into the source file. 
</p>

<pre class="explanation">
cb = (CheckBox) findViewById(R.id.cb_id);
</pre>

<p>
We find the reference to the CheckBox widget, defined in the 
<i>main.xml</i> file. 
</p>

<pre class="explanation">
cb.setChecked(true);
</pre>

<p>
The title is visible by default, so the CheckBox must be in a
checked state. We use the <code>setChecked()</code> method to
change the state of the widget. 
</p>

<pre class="explanation">
cb.setOnClickListener(new OnClickListener() 
{
    @Override
    public void onClick(View v) 
    {          
        CheckBox cb = (CheckBox) v;

        if (cb.isChecked()) 
        {
            setTitle("CheckBox");
        } else {
            setTitle("");
        }
    }
});
</pre>

<p>
In the <code>OnClickListener()</code> we define the <code>onClick()</code> method. 
We determine the state of the widget using the <code>isChecked()</code> method. 
The title of the screen is modified with the <code>setTitle()</code> method.
</p>

<img src="/img/java/android/checkbox.png" alt="CheckBox widget">
<div class="figure">
Figure: CheckBox widget
</div>


<p>
In this chapter of the Android development tutorial we have presented button
widgets. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified October 28, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

